Vue.component('one-tab',{
  props:['cityhot'],
  template: `
    <div @click="$emit('changecity', $event)">
      <dl><dt></dt><dd v-for="item in cityhot.cities" :key="item.id"><a :data-param="item.name">{{item.name}}</a></dd></dl>
    </div>
  `
})

Vue.component('two-tab',{
  props:['citygroup'],
  template: `
    <div @click="$emit('changecity', $event)">
    <dl v-for="items in citygroup" :key="items.tag"><dt>{{items.tag}}</dt><dd v-for="item in items.cities" :key="item.id" ><a :data-param="item.name">{{item.name}}</a></dd></dl>
    </div>
  `
})
var app = new Vue({
  el: '#app',
  data() {
    return {
      searchText: '',
      cityBox: false,
      currentTab:"one",
      tabs:[{name:"one",value:"热门城市"},{name:"two",value:"ABCDE"}],
      cityList: [
        {
          "tag": "热门城市",
          "cities": [
            {
              "id": "110100",
              "name": "北京"
            },
            {
              "id": "310100",
              "name": "上海"
            },
            {
              "id": "440100",
              "name": "广州"
            },
            {
              "id": "440300",
              "name": "深圳"
            },
            {
              "id": "420100",
              "name": "武汉"
            }
          ]
        },
        {
          "tag": "A",
          "cities": [
            {
              "id": "210300",
              "name": "鞍山",
            },
            {
              "id": "340800",
              "name": "安庆",
            },
            {
              "id": "410500",
              "name": "安阳",
            },
            {
              "id": "152900",
              "name": "阿拉善盟",
            },
            {
              "id": "520400",
              "name": "安顺",
            },
            {
              "id": "542500",
              "name": "阿里地区",
            },
            {
              "id": "610900",
              "name": "安康",
            },
            {
              "id": "652900",
              "name": "阿克苏地区",
            },
            {
              "id": "513200",
              "name": "阿坝藏族羌族自治州",
            },
            {
              "id": "654300",
              "name": "阿勒泰地区",
            }
          ]
        },
        {
          "tag": "B",
          "cities": [
            {
              "id": "110100",
              "name": "北京",
            },
            {
              "id": "130600",
              "name": "保定",
            },
            {
              "id": "150200",
              "name": "包头",
            },
            {
              "id": "210500",
              "name": "本溪",
            },
            {
              "id": "340300",
              "name": "蚌埠",
              "dis": [
                {
                  "disid": "340302",
                  "disname": "龙子湖区"
                },
                {
                  "disid": "340303",
                  "disname": "蚌山区"
                },
                {
                  "disid": "340304",
                  "disname": "禹会区"
                },
                {
                  "disid": "340311",
                  "disname": "淮上区"
                },
                {
                  "disid": "340321",
                  "disname": "怀远县"
                },
                {
                  "disid": "340322",
                  "disname": "五河县"
                },
                {
                  "disid": "340323",
                  "disname": "固镇县"
                }
              ]
            },
            {
              "id": "450500",
              "name": "北海",
            },
            {
              "id": "371600",
              "name": "滨州",
            },
            {
              "id": "610300",
              "name": "宝鸡",
            },
            {
              "id": "341600",
              "name": "亳州",
            },
            {
              "id": "150800",
              "name": "巴彦淖尔",
            },
            {
              "id": "220600",
              "name": "白山",
            },
            {
              "id": "220800",
              "name": "白城",
            },
            {
              "id": "451000",
              "name": "百色",
            },
            {
              "id": "511900",
              "name": "巴中",
            },
            {
              "id": "530500",
              "name": "保山",
            },
            {
              "id": "520500",
              "name": "毕节",
              "dis": [
                {
                  "disid": "520502",
                  "disname": "七星关区"
                },
                {
                  "disid": "520521",
                  "disname": "大方县"
                },
                {
                  "disid": "520522",
                  "disname": "黔西县"
                },
                {
                  "disid": "520523",
                  "disname": "金沙县"
                },
                {
                  "disid": "520524",
                  "disname": "织金县"
                },
                {
                  "disid": "520525",
                  "disname": "纳雍县"
                },
                {
                  "disid": "520526",
                  "disname": "威宁彝族回族苗族自治县"
                },
                {
                  "disid": "520527",
                  "disname": "赫章县"
                }
              ]
            },
            {
              "id": "652700",
              "name": "博尔塔拉蒙古自治州",
            },
            {
              "id": "652800",
              "name": "巴音郭楞蒙古自治州",
            },
            {
              "id": "620400",
              "name": "白银",
            }
          ]
        },
        {
          "tag": "C",
          "cities": [
            {
              "id": "510100",
              "name": "成都",
            },
            {
              "id": "500100",
              "name": "重庆",
            },
            {
              "id": "430100",
              "name": "长沙",
            },
            {
              "id": "220100",
              "name": "长春",
            },
            {
              "id": "320400",
              "name": "常州",
            },
            {
              "id": "130900",
              "name": "沧州",
            },
            {
              "id": "130800",
              "name": "承德",
            },
            {
              "id": "430700",
              "name": "常德",
            },
            {
              "id": "431000",
              "name": "郴州",
            },
            {
              "id": "140400",
              "name": "长治",
            },
            {
              "id": "341100",
              "name": "滁州",
            },
            {
              "id": "341700",
              "name": "池州",
            },
            {
              "id": "150400",
              "name": "赤峰",
            },
            {
              "id": "211300",
              "name": "朝阳",
            },
            {
              "id": "445100",
              "name": "潮州",
            },
            {
              "id": "451400",
              "name": "崇左",
            },
            {
              "id": "532300",
              "name": "楚雄彝族自治州",
            },
            {
              "id": "542100",
              "name": "昌都地区",
            },
            {
              "id": "652300",
              "name": "昌吉回族自治州",
            }
          ]
        },
        {
          "tag": "D",
          "cities": [
            {
              "id": "210200",
              "name": "大连",
            },
            {
              "id": "441900",
              "name": "东莞",
            },
            {
              "id": "230600",
              "name": "大庆",
            },
            {
              "id": "370500",
              "name": "东营",
            },
            {
              "id": "371400",
              "name": "德州",
            },
            {
              "id": "140200",
              "name": "大同",
            },
            {
              "id": "532900",
              "name": "大理白族自治州",
            },
            {
              "id": "210600",
              "name": "丹东",
            },
            {
              "id": "510600",
              "name": "德阳",
            },
            {
              "id": "232700",
              "name": "大兴安岭地区",
            },
            {
              "id": "511700",
              "name": "达州",
            },
            {
              "id": "533100",
              "name": "德宏傣族景颇族自治州",
            },
            {
              "id": "533400",
              "name": "迪庆藏族自治州",
            },
            {
              "id": "621100",
              "name": "定西",
            }
          ]
        },
        {
          "tag": "E",
          "cities": [
            {
              "id": "150600",
              "name": "鄂尔多斯",
            },
            {
              "id": "420700",
              "name": "鄂州",
            },
            {
              "id": "422800",
              "name": "恩施",
            }
          ]
        }
      ],
      newCityList:[]
    }
  },
  computed:{
    currentTabComponent: function () {
      return this.currentTab + '-tab'
    },
    cityhot: function () {
      return this.cityList[0]
    },
    citygroup: function () {
      return this.cityList.filter(function(item){
        return 'ABCDE'.includes(item.tag)
      })
    }
  },
  watch: {
    searchText (data) {
      if (data){
        this.newCity(data)
      } else {
        this.newCityList = []
      }
    }
  },
  methods:{
    enter() {
      this.cityBox = true
    },
    newCity (data) {
      let list = []
      this.cityList.slice(1).forEach(function(items) {
        items.cities.forEach(function(item){
          if(item.name.includes(data)){
            list.push(item)
          }
        })
      });
      if (list && list[0].name !== data){
        this.newCityList = list
      }
    },
    changecity (event) {
      let target = event.target || event.srcElement,
      param = target.getAttribute('data-param');
      this.searchText = param
      this.newCityList = []
    }
  }
})
